<template>
  <div id="checkEmailPage">
    <div class="flex_head">
      <div class="solid"></div>
      <div class="item_two">
        <h3>绑定邮箱</h3>
      </div>
    </div>
    <div class="infoHead flex">
      <div class="item item1"></div>
      <div class="item item2">
        <div class="line" style="font-weight: bold">为什么要绑定邮箱？</div>
        <div class="line">绑定邮箱可以增加账号的安全性，当你的密码丢失的时候，可以通过邮箱找回密码。</div>
      </div>

    </div>
    <div class="main">

      <el-steps class="my_step" :space="200" :active="step" style="margin-top: 40px;">
        <el-step title="步骤 1" description="请输入邮箱地址"></el-step>
        <el-step title="步骤 2" description="请输入验证码"></el-step>

        <el-step title="步骤 3" description="绑定成功"></el-step>
      </el-steps>

      <div class="handle">
        <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" ref="formLabelAlign">
          <div v-show="isShow1">
            <el-form-item prop="email" label="请输入邮箱地址" disabled="false" :rules="[
                                 { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                             { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } ]">
              <el-input v-model="formLabelAlign.email" placeholder="请输入正确的邮箱地址"></el-input>

            </el-form-item>
            <el-button type="primary" style="margin-top: 10px;" @click="nextStep1('formLabelAlign')">下一步</el-button>
          </div>
          <div v-show="isShow2">
            <el-form-item label="请输入验证码">
              <el-input v-model="formLabelAlign.checkCode" placeholder="请输入正确的验证码"></el-input>

            </el-form-item>
            <el-button type="primary" style="margin-top: 15px;" @click="goBack1">上一步</el-button>
            <el-button type="primary" style="margin-top: 15px;" @click="nextStep2">下一步</el-button>
          </div>

          <el-form-item label="" v-show="isShow3">

            <el-button type="text" style="font-size: 35px;" title="点击返回到第一步" @click="goBack"><i
              class="el-icon-check"></i>绑定成功
            </el-button>

          </el-form-item>

        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        step: 1,
        labelPosition: 'left',
        formLabelAlign: {
          email: '',
          checkCode: ''
        },
        isShow1: true,
        isShow2: false,
        isShow3: false,

      }
    },
    created() {

    },
    methods: {
      nextStep1(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formLabelAlign.email);
            let params = {
              email: this.formLabelAlign.email
            }
            this.$api.sendBindEmail(params).then(res => {
              if (res.code == '000000') {
                console.log(res.data);
                this.isShow1 = false;
                this.isShow2 = true;
                this.step = 2;
                this.$message({
                  type: 'success',
                  message: '邮箱验证成功，验证码已发送'
                })
              }
            })

          } else {
            this.$message({
              type: 'warning',
              message: '你输入的邮箱格式不正确'
            })
            return false;
          }
        });
      },
      goBack1() {
        this.step = 1;
        this.isShow1 = true;
        this.isShow2 = false;
        this.formLabelAlign.checkCode = '';
        this.formLabelAlign.email = ''
      },
      nextStep2() {
        var pattern = /[\u4e00-\u9fa5]/;
        if (pattern.test(this.formLabelAlign.checkCode)) {
          this.$message({
            type: 'warning',
            message: '验证码格式不能是中文'
          })
          return false;
        }

        if (this.formLabelAlign.checkCode == '') {
          this.$message({
            type: 'warning',
            message: '请输入验证码'
          })
        } else if (this.formLabelAlign.checkCode.length != 6) {
          this.$message({
            type: 'warning',
            message: '您输入的验证码位数不正确'
          })
          this.formLabelAlign.checkCode = '';

        } else {
          let params = {
            code: this.formLabelAlign.checkCode
          }
          this.$api.postmailcheckCode(params).then(res => {
            if (res.code == '000000') {
              console.log(res.data);
              this.step = 3;
              this.isShow2 = false;
              this.isShow3 = true;
              this.formLabelAlign.checkCode = '';
              this.formLabelAlign.email = '';
              this.$message({
                type: 'success',
                message: '验证码验证成功'
              })
            }
          })

        }
      },
      goBack() {
        this.step = 1;
        this.isShow3 = false;
        this.isShow1 = true;
      }
    }
  }
</script>

<style lang="less">
  #checkEmailPage {
    .infoHead{
      height: 90px;
      .item1{
        width: 3px;
        height: 100%;
        background-color: #ffbd30;
      }
      .item2{
        flex: 1;
        background-color: #fffde6;
      }
      .line{
        padding-left: 50px;
        line-height: 45px;
        text-align: left;
        font-size: 15px;
      }

    }
    .icon-icon1 {
      font-size: 35px !important;
      margin-right: 35px;
      position: absolute;
      color: #008000;
      right: 100px;
      bottom: -8px;
    }
    .title {
      text-align: right;
      font-size: 12px;
      margin-bottom: 10px;
      position: relative;
    }
    .icon-icon1 {
      font-size: 25px;
    }

    .main {
      .handle {
        width: 40%;
        margin-left: 20%;
        margin-top: 60px;
      }
      .my_step{
        margin-left: 20%;
      }
    }
    /*.el-steps.is-horizontal > .is-horizontal:last-child {*/
      /*width: 60px !important;*/
    /*}*/
  }
</style>
